<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/form.css" />
		<style>
			.layui-input-inline{width: 220px;}
			#signList{padding-left: 120px;}
			#signList span {
				border: 1px solid #ccc;
				padding: 2px 10px;
				border-radius: 4px;
				margin-right: 5px;
				cursor:pointer;
			}
			#signList span:nth-of-type(4n+1){border-color:#13c2c2;color:#13c2c2;}
			#signList span:nth-of-type(4n+2){border-color:#ffdc71;color:#ffdc71;}
			#signList span:nth-of-type(4n+3){border-color:#6ea5e6;color:#6ea5e6;}
			#signList span:nth-of-type(4n){border-color:#ffc0a0;color:#ffc0a0;}
			#signList span:nth-of-type(4n+1).active{background: #13c2c2;color:#fff}
			#signList span:nth-of-type(4n+2).active{background: #ffdc71;color:#fff}
			#signList span:nth-of-type(4n+3).active{background: #6ea5e6;color:#fff}
			#signList span:nth-of-type(4n).active{background: #ffc0a0;color:#fff}
		</style>
	</head>
	<body class="p10">
		<div class="container p15">
			<div class="header">
				<h2>添加知识</h2>
			</div>
			<div class="content-scroll layui-form">
				<div class="layui-row ">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-inline">
						<input type="text" name="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-row ">
					<label class="layui-form-label">分类</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="">
							<option value="">请选择</option>
							<option value="0">信息中心</option>
							<option value="其它">其它</option>
						</select>
					</div>
				</div>
				<div class="layui-row ">
					<label class="layui-form-label">标签</label>
					<div class="layui-input-inline">
						<input type="text" name="sign" autocomplete="off" class="layui-input">
					</div>
					<a href="javascript:;" class="layui-btn layui-btn-sm" id="addBtn">添加</a>
				</div>
				<div class="layui-row " id="signList">
				</div>
				<div class="layui-row ">
					<label class="layui-form-label">重要性</label>
					<div class="layui-input-inline">
						<select name="type" lay-verify="">
							<option value="">请选择</option>
							<option value="0">不重要</option>
							<option value="1">重要</option>
						</select>
					</div>
				</div>
				<div class="layui-row ">
					<label class="layui-form-label">
						内容
					</label>
					<div class="layui-input-inline" style="width: calc(100% - 120px);">
						<textarea id="content" style="display: none;"></textarea>
					</div>
				</div>
				<div class="layui-row save-btns">
					<a href="javascript:;" class="layui-btn  layui-btn-normal">保存</a>
					<a href="javascript:;" class="layui-btn  layui-btn-primary">关闭</a>
				</div>
			</div>
		</div>

		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			var obj = {'交换机':1,'疑难问题':1,'服务器':1,'常见问题':1};
			$(function(){
				initList();
				layui.use(['form', 'layedit'], function() {
					var form = layui.form,
						layedit = layui.layedit;
					layedit.build('content');
					//添加标签
					$("#addBtn").on('click',function(){
						var s = $("input[name='sign']").val();
						if(!s){
							layer.msg('不能为空')
						}else if(s && obj.hasOwnProperty(s)){
							layer.msg('该标签已存在')
							$("input[name='sign']").focus();
						}else{
							obj.s = 1;
							$("#signList").append(`<span>${s}</span>`)
							$("input[name='sign']").val('');
						}
					})
					$("#signList span").on('click',function(){
						$(this).toggleClass('active');
					})
				})
			})
			function initList(){
				var str = '';
				for(var i in obj){
					str += `<span>${i}</span>`
				}
				$("#signList").html(str);
			}
		</script>
	</body>
</html>
